import QtQuick 2.8
import QtQuick.Layouts 1.2
import QtQuick.Controls 2.14

Page {
    id: pageSubmits
    title: qsTr("已提交计数")
    visible: true
 
    property StackView stack: null

    property int batchCount: 0

    Keys.enabled: true
    focus: true
    Keys.onPressed: {
        if(event.key == Qt.Key_4) {
            selectPrev(1)
        }
        if(event.key == Qt.Key_6) {
            selectNext(1)
        }
        if(event.key == Qt.Key_8) {
            selectPrev(6)
        }
        if(event.key == Qt.Key_2) {
            selectNext(6)
        }
        if(event.key == Qt.Key_Escape){
            stack.custPop()
        }
        event.accepted = true
    }
    function selectPrev(amount){
        let index = listView.currentIndex;
        if (index - amount > -1)
            listView.currentIndex = index - amount;
        else
            listView.currentIndex = 0;
    }
    function selectNext(amount){
        let index = listView.currentIndex;
        if (index + amount < listView.count)
            listView.currentIndex = index + amount;
        else
            listView.currentIndex = listView.count - 1;
    }
    function fetchData(){

        let res = gHttp.countQuery(rootWindow.posId, rootWindow.batchName)
        // console.log(res)
                
        var json = JSON.parse(res);        
        if(json.code < 0){
            rootWindow.popupTips(json.message, 3000);
            return;
        }

        var items = json.data;
        batchCount = json.data.length;
        for(var i of items){
            var model = listModel.get(i-1);
            model.tipColor = '#15b621';
            model.status = '已提交';
            listModel.set(i-1, model);
        }
    }
    header: ToolBar {
        background: Rectangle {
            implicitWidth: 100
            implicitHeight: 40
            opacity: 1
            color: "#3f51b5"
        }
        RowLayout {
            anchors.fill: parent
            ToolButton {
                text: qsTr("‹返回[Esc]")
                onClicked: stack.custPop()
            }
            Label {
                text: "已提交计数"
                font.pointSize: 16
                color: '#ffffff'
                elide: Label.ElideRight
                horizontalAlignment: Qt.AlignHCenter
                verticalAlignment: Qt.AlignVCenter
                Layout.fillWidth: true
            }
            // ToolButton {
            //     text: qsTr("⋮")
            //     onClicked: menu.open()
            // }
        }
    }
    footer: Column{
        width: parent.width
        
        Rectangle{
            width: parent.width
            height: 40
            color: '#3f51b5'
            
            Text {
                anchors.centerIn: parent
                font.pointSize: 16
                color: '#ffffff'
                text: "←[4] ↑[8] →[6] ↓[2]"
            }
        }
    }

    ListModel {
        id: listModel
    }

    GridView {
        id: listView
        anchors.fill: parent
        model: listModel
        cellWidth: parent.width / 6
        cellHeight: parent.height / 4
        
        highlight: Rectangle { color: "lightsteelblue"; radius: 5 }
        focus: true

        header: Rectangle{
            color: '#263e87'
            width: parent.width
            height: gridHead.height
            Column{
                id: gridHead
                width: parent.width
                Text{
                    color: '#ffffff'
                    text: '考点：'+ rootWindow.posName
                    font.pointSize: 25
                    anchors.horizontalCenter: parent.horizontalCenter 
                }
                Text{
                    color: '#ffffff'
                    text: '批次：'+ rootWindow.batchName
                    font.pointSize: 25
                    anchors.horizontalCenter: parent.horizontalCenter 
                }
                Text{
                    color: '#ffffff'
                    text: `总数：${rootWindow.batchCount}， 已提交：${batchCount}`
                    font.pointSize: 25
                    anchors.horizontalCenter: parent.horizontalCenter 
                }
            }
        }

        delegate: Rectangle{
            width: listView.cellWidth
            height: listView.cellHeight
            color: 'transparent'
            Column {
                anchors.centerIn: parent
                Text { 
                    text: name; 
                    font.pointSize: 25
                    anchors.horizontalCenter: parent.horizontalCenter 
                }
                Text { 
                    text: status
                    color: tipColor
                    font.pointSize: 25
                    anchors.horizontalCenter: parent.horizontalCenter 
                }
            }
        }
    }

    Component.onCompleted: { 
        
        print("PageSubmits.onCompleted() called")
   
        // for (var i = 0; i < 100; i++){
        //     listModel.append({
        //         name: i + 1,
        //         color: 'green'
        //     })
        // }
    }
    
    function initialAction(){
        
        for (var i = 0; i < rootWindow.batchCount; i++){
            listModel.append({
                name: i + 1,
                tipColor: 'red',
                status: '---'
            })
        }
        
        fetchData()
    }
    
    // PageTaskCounter {
    //     id: pageTaskCounter
    //     visible: false
    // }
}